<template>
  <div class="box-main">
    <div class="main1">
      <!--    图书热榜-->
      <div class="box item1" :class="{'item1-active':isShow}">
        <div class="item-header">
          <div class="dot">
            <div style="background: #f8cbcb"></div>
            <div style="background: #f1f1ab"></div>
            <div style="background: #dbefbb"></div>
          </div>
          <div class="host">
            <img src="@/assets/images/fire.png">
            <span>图书热榜</span>
          </div>
          <img class="up-down" @click="change()" :src="img_url">
        </div>
        <div class="item-content" :class="{'content_active':isShow}">
          <div class="item-row" v-for="item in hotList">
            <div class="item-img">
              <img :src="item.url">
            </div>
            <div class="item-book">
              <div class="book-author">
                <span><<{{ item.bookName }}>></span>
                <span>借阅{{ item.lendMessageCount }}次</span>
              </div>
              <div class="book-introduction">
                {{ item.introduction }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--    罚款记录-->
      <div class="box item3">
        <div class="item-header">
          <div class="dot">
            <div style="background: #f8cbcb"></div>
            <div style="background: #f1f1ab"></div>
            <div style="background: #dbefbb"></div>
          </div>
          <div class="host">
            <img src="@/assets/images/fakuan.png">
            <span>罚款记录</span>
          </div>
          <img @click="to-page" class="img-to" src="@/assets/images/zhuan.png">
        </div>
        <div class="item-content">
          <div class="item-row" v-for="item in fineList">
            <div class="item-book">
              <span style="font-family:'楷体';font-weight: bold"><<{{ item.name }}>></span>
              <span class="price">
                 <img src="@/assets/images/qian.png" style="width: 15px;height: 15px;">
                {{ item.price }}</span>
              <span class="date">未赔偿</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main2">
      <!--    借阅历史-->
      <div class="box item2" :class="{'item1-active':isShow_itme2}">
        <div class="item-header">
          <div class="dot">
            <div style="background: #f8cbcb"></div>
            <div style="background: #f1f1ab"></div>
            <div style="background: #dbefbb"></div>
          </div>
          <div class="host">
            <img src="@/assets/images/book.png">
            <span>借阅历史</span>
          </div>
          <img class="up-down-itme2" @click="change_itme2()" :src="img_url_item2">
        </div>
        <div class="item-content" :class="{'content_active':isShow_itme2}">
          <div class="item-row" v-for="item in borrowList">
            <div class="item-img">
              <img :src="item.url">
            </div>
            <div class="item-book">
              <div class="book-author">
                <span>{{ item.bookName }}</span>
                <span>未归还</span>
              </div>
              <span class="date">
                <img src="@/assets/images/date.png" style="width: 20px;height: 20px;">
              借阅日期:{{ item.lendDate }}</span>
            </div>
          </div>
        </div>
      </div>
      <!--    消息中心-->
      <div class="box item4">
        <div class="item-header">
          <div class="dot">
            <div style="background: #f8cbcb"></div>
            <div style="background: #f1f1ab"></div>
            <div style="background: #dbefbb"></div>
          </div>
          <div class="host">
            <img v-if="!value" src="@/assets/images/message.png">
            <img v-if="value" src="@/assets/images/sys.png">
            <span>{{ value ? "系统消息" : "反馈消息" }}</span>
          </div>
          <div class="el-switch">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#13ce66">
            </el-switch>
          </div>
        </div>
        <div class="box-content">
          <transition>
            <div class="item-content" v-if="value">
              <div class="item-row" v-for="item in publishList">
                <div class="item-book system">
                    <div class="massge-box-date" >
                      <span>{{item.createTime}}</span>
                    </div>
                    <div class="massge-box-content">
                      <span>
                        {{item.content}}
                      </span>
                    </div>
                </div>
              </div>
            </div>
          </transition>
          <transition>
            <div class="item-content box-admin" v-if="!value">
              <div class="item-row" v-for="item in publishList">
                <div class="item-book">
                    <img src="@/assets/images/admin.png" alt="">
                    <div class="item-book-box">
                      <div class="date-box">
                        <span>{{item.createTime}}</span>
                      </div>
                      <div class="admin-mesage">
                        <span class="date" :class="item.id">{{item.content}}</span>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getHotList} from "@/api/index";
import {getBorrowListRequest} from "@/api/system/borrow";
import {searchFine} from "@/api/fine/fine";
import {getFeedbackList} from "@/api/system/feedback";

export default {
  name: "Index",
  data() {
    return {
      value: true,
      isShow: false,
      img_url: require("@/assets/images/up.png"),

      isShow_itme2: false,
      img_url_item2: require("@/assets/images/up.png"),

      hotList: [],
      borrowList: [],
      fineList: [],
      publishList: [],
    };
  },
  created() {
  },
  mounted() {
    this.getTheHotBookList();
    this.getTheBorrowList();
    this.getThePenalty();
    this.getTheMessageList();

  },
  methods: {
    change() {
      this.isShow = !this.isShow;
      if (this.isShow === true) {
        this.img_url = require("@/assets/images/down.png")
      } else {
        this.img_url = require("@/assets/images/up.png")
      }
      console.log(this.isShow)
    },
    change_itme2() {
      this.isShow_itme2 = !this.isShow_itme2;
      if (this.isShow_itme2 === true) {
        this.img_url_item2 = require("@/assets/images/down.png")
      } else {
        this.img_url_item2 = require("@/assets/images/up.png")
      }
      console.log(this.isShow_itme2)
    },
    getTheHotBookList() {
      getHotList().then((res) => {
        this.hotList = res.rows;
      });
    },
    getTheBorrowList() {
      getBorrowListRequest().then((res) => {
        this.borrowList = res.rows;
      });
    },
    getThePenalty() {
      searchFine().then((res) => {
        this.fineList = res.rows;
      });
    },
    getTheMessageList() {
      getFeedbackList({
        pageNum: 1,
        pageSize: 10,
        remark: 2
      }).then((res) => {
        this.publishList = res.rows;
      });
    },
  },
  watch: {
    'value': {
      handler(newval) {
        // true 系统消息
        if (newval) {
          getFeedbackList({
            pageNum: 1,
            pageSize: 10,
            remark: 2
          }).then((res) => {
            this.publishList = res.rows;
            console.log(this.publishList)
          });
        } else {
          // false 反馈消息
          getFeedbackList({
            pageNum: 1,
            pageSize: 10,
            remark: 1
          }).then((res) => {
            this.publishList = res.rows;
            console.log(this.publishList)
          });
        }

      }
    }
  }

};
</script>

<style scoped lang="scss">
//图书热榜
.item1 {
  .item-header {
    background: #c2c4c4;
    //background: linear-gradient(135deg, #f6d365, #fda085);
    .up-down {
      position: absolute;
      cursor: pointer;
      right: 20px;
      width: 20px;
      height: 20px;
    }
  }

  .item-row {
    .item-book {
      .book-author {
        span {
          display: inline-block;
          padding: 5px;
          border-radius: 5px;
          font-family: "楷体";
          font-size: 16px;
          font-weight: bolder;
          background: white;
        }
      }

      .book-introduction {
        border-radius: 5px;
        height: 60%;
        padding: 5px;
        margin-top: 5px;
        overflow: hidden;
        font-size: 14px;
        line-height: 24px;
        font-family: "楷体";
        background: white;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #909399;
      }
    }
  }
}

//借阅历史
.item2 {
  .item-header {
    background: #c2c4c4;

    .up-down-itme2 {
      position: absolute;
      cursor: pointer;
      right: 20px;
      width: 20px;
      height: 20px;
    }
  }
  .item-row {
    .item-book {
      position: relative;
      .book-author {
        span {
          font-family: "楷体";
          font-size: 16px;
          font-weight: bold;
        }
      }
      span {
        display: inline-block;
        padding: 5px;
        background: white;
        border-radius: 5px;
      }
      .date {
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 0px;
        font-size: 12px;
        color: #919293;
      }
    }
  }
}

//罚款记录
.item3 {
  .item-header {
    background: #c2c4c4;
    //background: linear-gradient(135deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6, #f9f9f9);
    .img-to {
      position: absolute;
      cursor: pointer;
      width: 20px;
      height: 20px;
      right: 20px;
      transition: 0.08s ease-out;
    }

    .img-to:hover {
      width: 28px;
      height: 28px;
    }
  }

  .item-row {
    position: relative;

    .item-book {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;

      .price {
        //position: absolute;
        //left: 400px;
        display: flex;
        align-items: center;
        align-items: center;
        gap: 5px;
        color: red;
      }

      span {
        display: inline-block;
        padding: 5px;
        background: white;
        border-radius: 5px;
      }
    }
  }
}

//消息中心
.item4 {
  overflow: hidden;

  .item-header {
    .el-switch {
      position: absolute;
      right: 10px;
    }

    background: #c2c4c4;
    //background: linear-gradient(135deg, #272727, #4a4a4a, #6d6d6d, #909090, #b3b3b3, #d6d6d6, #f9f9f9);
    .img-to {
      position: absolute;
      cursor: pointer;
      width: 20px;
      height: 20px;
      right: 20px;
      transition: 0.08s ease-out;
    }
    .img-to:hover {
      width: 28px;
      height: 28px;
    }
  }
  .box-content {
    position: relative;
    height: 85%;
    .box-admin {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }
  }
  .item-row {
    position: relative;
    .item-book {
      display: flex;
      align-items: center;
      .item-book-box{
        width: 100%;
        height: 100%;
        .date-box{
          display: flex;
          justify-content: center;
          height: 20px;
          margin-left: 10px;
          span{
            color: #919293;
            font-size: 14px;
          }
        }
      }

      img{
        width: 40px;
        height: 40px;
      }
      .admin-mesage{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        padding: 10px 0px;
        height: 60%;
        border-radius: 5px;
        background: white;
        overflow: hidden;
        .date{
          position: absolute;
          display: inline-block;
          padding: 5px;
          left: 100%;
          border-radius: 5px;
          user-select: none;
          white-space: nowrap;
          animation: myAdmin 8s linear infinite;
        }
      }
      .price {
        position: absolute;
        left: 400px;
        display: flex;
        align-items: center;
        gap: 5px;
        color: red;
      }
    }
    .system{
      display: flex;
      flex-direction: column;
      .massge-box-date{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        width: 100%;
        color: #919293;
        font-size: 14px;
      }
      .massge-box-content{
        padding: 5px;
        background: white;
        border-radius: 5px;
        height: 80px;
        width: 100%;
        font-size: 14px;
      }
    }
  }
}

//公共样式
@keyframes myAdmin {
  from{
    left: 100%;
}
  to{
    left: 0;
    transform: translateX(-100%);
  }
}
.box-main {
  display: flex;
  padding: 20px;
  gap: 10px;

  .main1, .main2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
}

.box {
  border-radius: 10px;
  box-shadow: 1.5px 1.5px 5px #dadbdc;
}

.item-content::-webkit-scrollbar-track {
  background: white;
}

.item1, .item2, .item3, .item4 {
  padding: 10px;
  height: 400px;
  transition: 0.3s ease-in-out;
}

.item-header {
  position: relative;
  display: flex;
  height: 50px;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.dot {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  left: 0px;
  height: 50px;
  width: 60px;

  div {
    height: 12px;
    width: 12px;
    border-radius: 50%;
  }
}

.host {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  gap: 5px;
  height: 100%;

  img {
    width: 30px;
    height: 30px;
    object-fit: cover;
  }

  span {
    font-family: 楷体;
    font-weight: bold;
  }
}

.item-content {
  width: 100%;
  height: 85%;
  overflow: auto;
  transition: 0.3s ease-in-out;
}

.item4 {
  .item-content {
    height: 100%;
  }
}

.item-content::-webkit-scrollbar {
  width: 0em;
  background-color: white;
}

.item-row {
  display: flex;
  height: 100px;
  width: 100%;
  border: 2px solid #e6ebf5;
  background: #F5F5F5;
  border-radius: 10px;
  padding: 5px;
  margin: 5px 0px;

  .item-img {
    height: 100%;
    width: 80px;
    border-radius: 5px;

    img {
      object-fit: cover;
      width: 80px;
      height: 100%;
      border-radius: 5px;
    }
  }

  .item-book {
    height: 100%;
    width: 100%;
    padding-left: 10px;

    .book-author {
      display: flex;
      justify-content: space-between;
    }
  }
}

.item1-active {
  height: 605px;
}

.content_active {
  height: 530px;
}

/* 进入动画 */
.v-enter-active {
  animation: move 1s;
}

/* 离开动画 */
.v-leave-active {
  animation: move 1s reverse;
}

@keyframes move {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translate(0);
  }
}
</style>
